{extend name="public/base" /}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
        	<div class="widget-head">
				<div class="widget-title">编辑页面</div>
			</div>
			<div class="widget-body layui-col-sm12 layui-col-md12 layui-col-lg12">
				<div class="work-diy dis-flex flex-x-between">
					<div id="diy-menu" class="diy-menu">
						<div class="menu-title"><span>组件库</span></div>
						<div class="navs">
							<div class="navs-group">
								<div class="title">媒体组件</div>
								<div class="navs-components">
									<nav class="special" data-type="banner">
										<p class="item-icon">
											<i class="layui-icon layui-icon-carousel" style="font-size: 30px;"></i>
										</p>
										<p>图片轮播</p>
									</nav>
									<nav class="special" data-type="imageSingle">
										<p class="item-icon">
											<i class="layui-icon layui-icon-picture" style="font-size: 30px;"></i>
										</p>
										<p>单图</p>
									</nav>
									<nav class="special" data-type="window">
										<p class="item-icon">
											<i class="layui-icon layui-icon-layouts" style="font-size: 30px;"></i>
										</p>
										<p>图片橱窗</p>
									</nav>
									<nav class="special" data-type="video">
										<p class="item-icon">
											<i class="layui-icon layui-icon-video" style="font-size: 30px;"></i>
										</p>
										<p>视频</p>
									</nav>
								</div>
								<div class="title">商城组件</div>
								<div class="navs-components">
									<nav class="special" data-type="search">
										<p class="item-icon">
											<i class="layui-icon layui-icon-search" style="font-size: 30px;"></i>
										</p>
										<p>搜索框</p>
									</nav>
									<nav class="special" data-type="notice">
										<p class="item-icon">
											<i class="layui-icon layui-icon-notice" style="font-size: 30px;"></i>
										</p>
										<p>公告</p>
									</nav>
									<nav class="special" data-type="navBar">
										<p class="item-icon">
											<i class="layui-icon layui-icon-app" style="font-size: 30px;"></i>
										</p>
										<p>导航</p>
									</nav>
									<nav class="special" data-type="goods">
										<p class="item-icon">
											<i class="layui-icon layui-icon-component" style="font-size: 30px;"></i>
										</p>
										<p>商品</p>
									</nav>
									<nav class="special" data-type="coupon">
										<p class="item-icon">
											<i class="layui-icon layui-icon-gift" style="font-size: 30px;"></i>
										</p>
										<p>优惠券</p>
									</nav>								  
								</div>
								<div class="title">工具组件</div>
								<div class="navs-components">
									<nav class="special" data-type="blank">
										<p class="item-icon">
											<i class="layui-icon layui-icon-layer" style="font-size: 30px;"></i>
										</p>
										<p>辅助空白</p>
									</nav>
									<nav class="special" data-type="guide">
										<p class="item-icon">
											<i class="layui-icon layui-icon-subtraction" style="font-size: 30px;"></i>
										</p>
										<p>辅助线</p>
									</nav>
									<nav class="special" data-type="richText">
										<p class="item-icon">
											<i class="layui-icon layui-icon-file" style="font-size: 30px;"></i>
										</p>
										<p>富文本</p>
									</nav>
								</div>
							</div>
						</div>
						<div class="action">
							<button id="submit" type="button" class="layui-btn">保存</button>
						</div>
					</div>
					<div class="diy-phone">
						<div id="diy-page" class="phone-top optional __no-move" data-type="page"></div>
						<div id="phone-main" class="phone-main layer-scrollable-vertical"></div>
					</div>
					<div id="diy-editor" class="diy-editor form-horizontal">
						<div class="inner"></div>
					</div>
				</div>
				<div class="tips">
					<div class="pre" style="color:#FF5722">
						<p>1. 设计完成后点击"保存页面"，在小程序端页面下拉刷新即可看到效果。</p>
						<p>2. 如需填写链接地址请参考页面链接</p>
					</div>
				</div>
			</div>
        </div>
    </div>
</div>
{include file="public/diy" /}
{include file="public/editor"/}  
{/block}
{block name="style"}
<link rel="stylesheet" href="/static/admin/css/diy.css">
{/block}
{block name="js"}
<script src="/static/admin/js/jquery.form.min.js"></script>
<script src="/static/admin/js/art-template.js"></script>
<script src="/static/admin/js/app.js"></script>
<script src="/static/admin/js/select.data.js"></script>
<script src="/static/admin/js/ddsort.js"></script>
<script src="/static/admin/js/diy.js"></script>
<script>
    $(function () {		
        // 渲染diy页面
         new diyPhone({});
    });
</script>
{/block}